<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script type="text/javascript" src="js/global.js"></script>
		<script src="./layui/layui.js"></script>
	</head>

	<body>
		<!--chenkForm()验证全部通过返回true否则返回faLse-->
		<form class="layui-form" action="" onsubmit="false">
			<table width="500" border="0" align="center" style="margin-top: 100px;">
				<!--<tr align="center">
					<td colspan="3">
						<img src="img/top.jpg" width="100%" />
					</td>
				</tr>-->
				<tr>
					<td align="right">用户名：</td>
					<td>
						<input required lay-verify="required" placeholder="" autocomplete="off" type="text" name="loginName" id="loginName" style="border: 1px solid blue;" onblur="ckuserName()" onfocus="fouserName()" />
					</td>
					<td id="nameTd" style="color: gray;">中文、字母或数字</td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td>
						<input type="password" name="password" id="password" style="border: 1px solid blue;" onblur="ckpwd()" onfocus="fopwd()" />
					</td>
					<td id="pwdTd" style="color: gray;">首位为字母的6-10位字符串</td>
				</tr>
				<tr>
					<td align="right">确认密码：</td>
					<td>
						<input type="password" id="repwd" style="border: 1px solid blue;" onblur="ckrepwd()" onfocus="forepwd()" />
					</td>
					<td id="repwdTd" style="color: gray;">与密码一致</td>
				</tr>
				<tr>
					<td align="right">邮箱地址：</td>
					<td>
						<input type="email" name="protectEmail" id="protectEmail" style="border: 1px solid blue;" onblur="cktxtEmail()" onfocus="fotxtEmail()" />
					</td>
					<td id="txtEmailTd" style="color: gray;">合法的邮箱地址</td>
				</tr>
				<tr>
					<td align="right">手机号码：</td>
					<td>
						<input type="text" name="protectMtel" id="protectMtel" style="border: 1px solid blue;" onblur="ckphone()" onfocus="fophone()" />
					</td>
					<td id="phoneTd" style="color: gray;">合法的手机号码</td>
				</tr>
				<tr>

					<td height="50"></td>
					<td>
						<input lay-submit lay-filter="formDemo" type="image" src="images/sumbit_btn.jpg" />
					</td>
					<td></td>
				</tr>
			</table>
		</form>
		<script type="text/javascript">
			//用户名
			//用户名获得焦点后的样式
			function fouserName() {
				var name = document.getElementById("loginName").value;
				var td = document.getElementById("nameTd");
				td.innerHTML = "<span style='color: black;'>中文、字母或数字</span>"
			}
			//用户名失去焦点后的样式
			function ckuserName() {
				var name = document.getElementById("loginName").value;
				var td = document.getElementById("nameTd");
				var reg = /^[\u4e00-\u9fa5a-zA-Z-z0-9]+$/;//中文、字母或数
				if(reg.test(name) == true) {//==true验证通过
//					td.innerHTML = "<span style='color: red;'>通过</span>";
//					//表示没有通过验证
//					return true;
//					layui.use('form', function() {
						var $ = layui.jquery; //引入jquery
						var a=true;
//						$(function() {
							$.ajax({
								type: "post",
								url: globalData.server + "./users/selectUser?loginName=" + name,
								dataType: "json",
								success: function(data) {
									close(data);
									if(data.count > 0) { //>0用户已存在
										td.innerHTML = "<span style='color: red;'>用户已存在</span>";
										//表示没有通过验证
										a=false
										return a;
									} else {
										//通过验证
										td.innerHTML = "<span style='color: green;'>验证通过</span>";
										//表示通过验证
										a=true;
										return a;
									}
								}

							})
						return a;
						
						
//						});

//					});
				} else {
					td.innerHTML = "<span style='color: red;'>用户名格式不正确</span>";
					//表示没有通过验证
					return false;
				}
			}
			//密码
			//密码获得焦点后的样式
			function fopwd() {
				var pwd = document.getElementById("password").value;
				var td = document.getElementById("pwdTd");
				td.innerHTML = "<span style='color: black;'>首位为字母的6-10位字符串</span>";
			}
			//密码失去焦点后的样式
			function ckpwd() {
				var pwd = document.getElementById("password").value;
				var td = document.getElementById("pwdTd");
				//正则表达式
				var reg = /^[a-zA-Z][a-zA-Z0-9]{4,10}$/;
				if(reg.test(pwd) == true) {
					//通过验证
					td.innerHTML = "<span style='color: green;'>验证通过</span>";
					//表示通过验证
					return true;
				} else {
					td.innerHTML = "<span style='color: red;'>密码格式不正确</span>";
					//表示没有通过验证
					return false;
				}
			}
			//确认密码
			//确认密码获得焦点后的样式
			function forepwd() {
				var pwd = document.getElementById("password").value;
				var td = document.getElementById("repwdTd");
				td.innerHTML = "<span style='color: black;'>与密码一致</span>";
			}
			//确认密码失去焦点后的样式
			function ckrepwd() {
				var pwd = document.getElementById("password").value;
				var repwd = document.getElementById("repwd").value;
				var td = document.getElementById("repwdTd");
				if(pwd == repwd) {
					//通过验证
					td.innerHTML = "<span style='color: green;'>验证通过</span>";
					//表示通过验证
					return true;
				} else {
					td.innerHTML = "<span style='color: red;'>确认密码与密码不一致</span>";
					//表示没有通过验证
					return false;
				}
			}
			//邮箱地址
			//邮箱地址获取焦点后的样式
			function fotxtEmail() {
				var txtEmail = document.getElementById("protectEmail").value;
				var td = document.getElementById("txtEmailTd");
				td.innerHTML = "<span style='color: black;'>合法的邮箱地址</span>";
			}
			//邮箱地址失去焦点后的样式
			function cktxtEmail() {
				var txtEmail = document.getElementById("protectEmail").value;
				var td = document.getElementById("txtEmailTd");
				//正则表达式
				var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if(reg.test(txtEmail) == true) {
					//通过验证
					td.innerHTML = "<span style='color: green;'>验证通过</span>";
					//表示验证通过
					return true;
				} else {
					td.innerHTML = "<span style='color: red;'>邮箱地址不合法</span>";
					//表示验证不通过
					return false;
				}
			}
			//手机号码
			//手机号码获取焦点后的样式
			function fophone() {
				var phone = document.getElementById("protectMtel").value;
				var td = document.getElementById("phoneTd");
				td.innerHTML = "<span style='color: black;'>合法的手机号码</span>";
			}
			//手机号码失去焦点后的样式
			function ckphone() {
				var phone = document.getElementById("protectMtel").value;
				var td = document.getElementById("phoneTd");
				//正则表达式
				var reg = /^([1][358][0-9][0-9]{8})|([1][4][37][0-9]{8})|([1][7][01367][0-9]{8})$/
				if(reg.test(phone) == true) {
					//通过验证
					td.innerHTML = "<span style='color: green;'>验证通过</span>";
					//表示通过验证
					return true;
				} else {
					td.innerHTML = "<span style='color: red;'>手机号码不合法</span>";
					//表示验证不通过
					return false;
				}
			}
			//提交
			//提交的前提是所有验证都通过
			//这里需要调用所有的验证方法
			//只有所有的验证方法返回的都是true，才可以提交
			layui.use(['form'], function() {
				var form = layui.form;
				var $ = layui.jquery;
				//解决跨域
				$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
					options.xhrFields = {
						withCredentials: true
					}
				})
//				alert("1名称"+ckuserName()+"密码"+ckpwd()+"确认"+ckrepwd()+"邮箱"+cktxtEmail()+"电话"+ckphone());
				//监听提交
				form.on('submit(formDemo)', function(data) {
//					alert("2名称"+ckuserName()+"密码"+ckpwd()+"确认"+ckrepwd()+"邮箱"+cktxtEmail()+"电话"+ckphone());
					if(ckuserName() == true && ckpwd() == true && ckrepwd() == true && cktxtEmail() == true && ckphone() == true) { //判断验证
						var d = data.field; //表单中的数据，定义一个对象来接收
						var url = globalData.server + './users/add';
						$.post(url, d, function(data) {
							console.log(data);
							if(data.count > 0) {
								var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
								parent.layer.close(index); //再执行关闭   
							} else {
								layer.msg(data.msg, {
									icon: 6
								});
							}
						}, "json");
						return false;
					} 
					else {
						alert("验证有误，请审核完毕再次提交");
						//					禁止提交
						return false;
					}
				});
				
			});
		</script>
	</body>

</html>